<template>
  <div>
    <collection-item
      v-for="c in collectionList"
      :key="c.id"
      @delete="del"
      :collection="c"
    ></collection-item>
    <el-skeleton :loading="loading" :rows="6" animated />
    <el-empty v-if="page.total == 0 && !loading" description="空空如也~"></el-empty>
  </div>
</template>

<script>
import postApi from "@/axios/postApi";
import CollectionItem from "./CollectionItem.vue";
import PageMixin from "@/mixins/PageMixin";
export default {
  components: {
    CollectionItem,
  },
  mixins: [PageMixin],
  data() {
    return {
      collectionList: [],
    };
  },

  methods: {
    getCollectionByUser() {
      postApi
        .getCollectionByUser({
          current: this.page.current,
          size: this.page.size,
        })
        .then(({ data }) => {
            this.collectionList = this.collectionList.concat(data.data.records);
            this.page.current = data.data.current;
            this.page.total = data.data.total;
            this.page.pages = data.data.pages;
            //关闭加载动画
            this.loading = false;
        })
       
    },
    load() {
      this.page.current++;
      this.getCollectionByUser();
    },
    del(id) {
      postApi.cancelCollect(id).then(({ data }) => {
        console.log(data);
        if (data.code === this.$status.SUCCESS_CODE) {
          for (let i = 0, len = this.collectionList.length; i < len; i++)
            if (this.collectionList[i].post.postId == id) {
              this.collectionList.splice(i, 1);
              this.$message.success("删除成功");
              break;
            }
        } else this.$message.error("获取数据出错");
      });
    },
  },

  created() {
    this.getCollectionByUser();
  },
};
</script>

<style>
</style>